import { resolve } from '../build/webpack.base.config';
import { createApp } from './app';

// async await 方法
export default async context => {
  const { app, router, store } = createApp();

  // 设置服务端路由的位置 拿到客户端的请求路径
  router.push(context.url);
  // 服务端渲染必须要得到页面url后才能加meta
  const meta = app.$meta();
  context.meta = meta;
  // await new Promise((resolve, reject) => {
  //   router.onReady(resolve, reject);
  // })
  // 等待router将可能的异步组件和钩子函数解析完成
  await new Promise(router.onReady.bind(router));

  // 当这个rendered调用的时候 可以拿到服务端渲染好的vuex数据
  context.rendered = () => {
    // rendered 会把 context.state 数据对象内联到页面模板中
    // 最终发送给客户端的页面中会包含一段脚本：window.__INITIAL_STATE__ = context.state
    // 客户端就要把页面中的 window.__INITIAL_STATE__ 拿出来填充到客户端的 vuex 中
    context.state = store.state;
  }
  return app;
}

// // Promise方法
// export default context => {
//   // 为什么要返回promise呢 因为路由中有可能有用import('./xxx')导入的懒加载组件
//   // 必须确保服务器能够等待所有内容在渲染前就已经准备就绪。
//   return new Promise((resolve, reject) => {
//     const { app, router } = createApp();

//     // 设置服务端路由的位置 拿到客户端的请求路径
//     router.push(context.url);

//     // 等待router将可能的异步组件钩子函数解析完成以后
//     // onReady 有两个参数 第一个是解析成功 第二个是解析失败
//     router.onReady(
//       () => {
//         const matchedComponents = router.getMatchedComponents();
//         if (!matchedComponents.length) {
//           return reject({ code: 404 });
//         }
//         resolve(app);
//       },
//       reject
//     );
//   });
// }

// // 最原始的方法 不支持动态加载组件
// export default context => {
//   const { app } = createApp();

//   // 服务端的路由处理、数据预取...

//   return app;
// }